<template>
  <div class="preview">
    <div class="pb-4">
      <div class="flex justify-between items-center">
        <h3>{{ t["预览"] }}</h3>
        <div class="flex g-4 items-center gap-4">
          <span v-if="selectedProductIds.length === 0"> {{ t["请选择商品"] }}</span>
          <a-button type="primary" :disabled="!currentGroup.groupsId" @click="bound">
            {{ t["下发"] }}
          </a-button>
        </div>
      </div>
    </div>
    <div class="preview-container">
      <div class="sidebar-list">
        <ul class="flex flex-col gap-4 h-full">
          <li v-for="(item, key) in themeList" :key="key" :class="{ active: groupIndex === item.groupsIndex }">
            <img :preview="false" :src="item.imgSrc"></img>
            <div>{{ t["商品数量"] }}: {{ item.groupsIndex }}</div>
          </li>
        </ul>
      </div>
      <CanvasContainer style="z-index: 0;" v-if="canvasConfig?.themeId" v-model:scale="canvasConfig.scale" :data="componentList"
        :width="canvasConfig.width!" :height="canvasConfig.height!" :background="canvasConfig.background">
      </CanvasContainer>
      <a-card v-else class="w-full">
        <a-empty :description="t['请选择商品']"> </a-empty>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { boundMedia } from "@/api/service/lcd-device/lcd-device";
import { previewTheme } from "@/api/service/theme/theme";

import { LcdTheme } from "@/api/service/theme/types";
import CanvasContainer from "../../../theme/board/canvas/CanvasContainer.vue";
import { list } from "../../data/curd";
import { dispatchModal, form } from "../../data/form";
import {
  canvasConfig,
  componentList,
  currentComponent,
  currentGroup,
  groupIndex,
  previewToggle,
  selectedProductIds,
  themeList
} from "../data/data";
/* 给下面代码生成注释 */

const t = translate("公共模块");
const clearData = () => {
  currentComponent.value = undefined;
  selectedProductIds.value = [];
  componentList.value = [];
};
const matchTheme = (): LcdTheme | undefined => {
  const index = groupIndex.value;

  const target = currentGroup.value.items.find((e) => {
    if (e.groupsIndex === index) {
      return e;
    }
    return null;
  });

  if (target && target.image) {
    canvasConfig.value = target;
    componentList.value = target.image;
  }
  if (target) {
    return target;
  }
  return undefined;
};
/*
 * bound 函数，用于将媒体与当前选中的模板进行绑定
 */
const bound = async () => {
  // 构建请求数据
  const data = {
    // 当前选中的模板 ID
    //     templateId: currentGroup.value.groupsId,
    templateId: currentGroup.value.groupsId,
    // 表单中的媒体 ID
    mediaId: form.value.mediaId,
    // 组件列表
    goodsList: selectedProductIds.value.map((e, i) => {
      return {
        label: String.fromCharCode(97 + i),
        value: e
      };
    })
  };
  // 等待 boundMedia 接口响应
  await boundMedia(data);
  await list();
  // 绑定完成后，关闭模态框
  dispatchModal.value = false;
  clearData();
};

const preview = async () => {
  const target = matchTheme();

  if (!target) return;
  let placeholder: any = undefined
  const arr = target.image?.filter(v => {
    if (v.placeholders) {
      placeholder = v
      return false
    }
    return v
  })
  const promiseArr = arr?.map(async (v, i) => {
    const data = await previewTheme(selectedProductIds.value[i], v.templateId);
    v.imageSrc = data.data;
    return v;
  });
  if (promiseArr) {
    componentList.value = await Promise.all(promiseArr);
    if (placeholder) {
      componentList.value.unshift(placeholder)
    }
  }
};
watch(previewToggle, () => {
  preview();
});

onUnmounted(() => {
  clearData();
});
</script>

<style lang="scss" scoped>
.preview {
  @apply flex-1 flex flex-col;
  border: 1px solid #ddd;
  padding: 12px;
  overflow: hidden;

}

.preview-container {
  height: calc(100% - 52px);
  @apply flex-1 flex gap-2 w-full;
  .sidebar-list {
    @apply h-full overflow-y-auto overflow-x-hidden w-[140px] relative z-10;
  }

  border-bottom: 1px solid #ddd;

  ul {
    @apply relative z-100;
    li {
      @apply p-1 overflow-hidden;
      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }
    }
  }
}

.active {
  border: 2px solid #f030e6;
}
</style>
